<!-- @author zhengjie -->
<template>
  <div>
    <el-form-item :label="title" prop="name">
      <div class="icons" v-if="!upload">
        <div class="item" v-for="(item, index) in icons" :key="item.id" @click="checkedMe(index)">
          <img :src="item.url" alt="">
          <i class="el-icon-success" style="color:#FFDD03" v-show="item.checked"></i>
        </div>
      </div>
      <div class="diy" v-if="!upload">(没有合适的？可 <span @click="upload = true">自定义上传</span>)</div>
      <el-upload v-if="upload" class="avatar-uploader" :action="action" :show-file-list="false" :headers="headers"
        :on-success="handleAvatarSuccess">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="diy" v-if="upload">(不想自定义上传？可 <span @click="upload = false">选择图标</span>)</div>
    </el-form-item>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: 'icon',
  props: {
    title: {
      type: String,
      default: '图标'
    }
  },
  data() {
    return {
      icons: [
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/weifahuo.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon13.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon12.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon11.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon10.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon9.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon8.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon7.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon6.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon5.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon4.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon3.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon2.png',
          checked: false
        },
        {
          url: 'http://static.chonglaoban.cn/Public/images/serCategory/icon1.png',
          checked: false
        },
      ],
      upload: false,
      imageUrl: '',
      action: process.env.VUE_APP_BASE_API + '/pet/upload/comFile',
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    }
  },
  methods: {
    //选中图标
    checkedMe(i) {
      this.icons.forEach((item, index) => {
        i == index ? item.checked = true : item.checked = false
      })
      this.imageUrl = this.icons[i].url
      this.$emit('check',this.icons[i].url)
    },
    // 上传图标成功
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.url;
      this.$emit('upload',res.url)
    },
  }
}
</script>

<style lang="scss">
.icons::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.icons {
  height: 165px;
  border-radius: 8px;
  background: #f9f9f9;
  border: 1px dashed #ddd;
  overflow-y: auto;
  padding: 20px 10px 0;
  width: 400px;

  .item {
    display: inline-block;
    width: 25%;
    text-align: center;
    margin-bottom: 15px;
    position: relative;

    img {
      width: 45px;
    }

    i {
      position: absolute;
      top: 0;
      right: 15px;
      font-size: 16px;
    }
  }

  .item:hover {
    cursor: pointer;
  }
}

.diy {
  font-size: 12px;
  color: #333336;

  span {
    color: #409eff;
  }

  span:hover {
    cursor: pointer;
  }
}
</style>
